<template>
    <div class="echarts-box">
        <div id="pieEcharts" :style="{ width: this.width, height: this.height }"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import { onMounted, onUnmounted, watch } from "vue"

export default {
    name: 'ColumnChart',
    props: ["width", "height", "data"],
    setup(props) {
        let myEcharts = echarts

        watch(() => props.data, newVal => {
            const data = JSON.parse(JSON.stringify(newVal))
            if (newVal) {
                initChart(data)
            } else {
                onMounted(() => {
                    initChart()
                })
            }
        })

        onUnmounted(() => {
            myEcharts.dispose
        })

        function initChart(data) {
            let chart = myEcharts.init(document.getElementById("pieEcharts"), "purple-passion");
            chart.setOption({
                baseOption: {
                    title: {
                        text: '档案类型统计',
                        top: 'top',
                        left: 'center',
                        textStyle: {
                            fontSize: 20,
                            fontWeight: '',
                            color: '#000'
                        },
                    },//标题
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },//提示框，鼠标悬浮交互时的信息提示
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: data.catalogArr,
                        textStyle: {
                            color: "rgba(0, 0, 0, .5)",
                            fontSize: '12'
                        }
                    },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
                    series: [
                        {
                            name: '档案分类',//tooltip提示框中显示内容
                            type: 'pie',//图形类型，如饼状图，柱状图等
                            radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
                            center: ["50%", "50%"],
                            //roseType:'area',是否显示成南丁格尔图，默认false
                            itemStyle: {
                                label: {
                                    show: true,
                                    textStyle: { color: '#3c4858', fontSize: "18" },
                                    formatter: function (val) {   //让series 中的文字进行换行
                                        return val.name.split("-").join("\n");
                                    }
                                },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                                labelLine: {
                                    show: true,
                                    lineStyle: { color: '#3c4858' }
                                },//线条颜色,//基本样式
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
                                    textColor: '#000'
                                }//鼠标放在各个区域的样式
                            },
                            data: data.catalogList,//数据，数据中其他属性，查阅文档
                            color: ['#A768F4', '#53DFFA', '#FD9C00'],//各个区域颜色
                        },
                    ],
                }
            });
            window.onresize = function () {
                chart.resize();
            };
        }
        return {
            initChart
        };
    }
};
</script>
